<template>
  <div class="app-container">

    <div class="idcs-list-container">
      <!--<div>-->
      <div class="menu el-col-14">
        <el-button type="default" @click="addIdc">添加</el-button>
        <!--<el-button type="danger">xxxx</el-button>-->
      </div>
      <div class="search el-col-10">
        <el-input placeholder="搜索关键字" v-model="params.mix_info" @keyup.enter.native="searchClick" class="input-with-select">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>

      <!-- 列出内容 -->
      <el-table :data="idcsList" border style="width: 100%">
        <!--<el-table-column prop="id" label="ID"></el-table-column>-->
        <el-table-column sortable align="center" width="120" fixed prop="name" label="IDC"></el-table-column>
        <el-table-column sortable align="center" width="120" prop="manage" label="管理员"></el-table-column>
        <el-table-column sortable align="center" width="120" prop="phone" label="电话"></el-table-column>
        <el-table-column sortable align="center" width="180"  prop="email" label="邮箱"></el-table-column>
        <el-table-column sortable align="center" width="120" prop="letter" label="简称"></el-table-column>
        <el-table-column sortable align="center" max-width="500" min-width="180" prop="address" label="地址"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="handleSubmitDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pageination" v-show="total>5">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 15, 20]"
          :current-page.sync="params.page"
          :page-size="params.page_size"
          :total="total">
        </el-pagination>
      </div>

      <!-- 新增弹窗 -->
      <el-dialog title="新增IDC" :visible.sync="dialogVisibleAdd" center width="40%">
        <idc-form ref="idcForm"
                  :is-loading="isLoading"
                  @cancel="handleCancelAdd"
                  @submit="handleSubmitAdd">
        </idc-form>
      </el-dialog>

      <!-- 编辑弹窗 -->
      <el-dialog title="编辑" :visible.sync="dialogVisibleEdit" center width="40%">
        <idc-form ref="idcForm"
                  :is-loading="isLoading"
                  :form="currentValue"
                  @cancel="handleCancelEdit"
                  @submit="handleSubmitEdit">
        </idc-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { getIdcsList, deleteIdc, createIdc, updateIdc } from '../../../api/resources'
  import idcForm from './idcs-form'

  export default {
    name: 'idcs',
    components: {
      idcForm
    },
    data() {
      return {
        dialogVisibleAdd: false,
        dialogVisibleEdit: false,
        idcsList: [],
        isLoading: false,
        currentValue: {
        },
        total: 0,
        params: {
          page: 1,
          page_size: 10,
          mix_info: '' // 搜索内容，可能包含多个字段
        }
      }
    },
    methods: {
      fetchData() {
        getIdcsList(this.params).then(
          res => {
            this.idcsList = res.results
            this.total = res.count
          }
        )
      },
      // 改变页码和页面大小时获取对应的数据
      handleCurrentChange(val) {
        this.params.page = val
        this.fetchData()
      },
      handleSizeChange(val) {
        this.params.page_size = val
        this.fetchData()
      },
      searchClick() {
        this.params.page = 1
        this.fetchData()
      },
      addIdc() {
        this.dialogVisibleAdd = true
      },
      handleEdit(value) {
        this.currentValue = { ...value }
        this.dialogVisibleEdit = true
      },
      handleSubmitDelete(value) {
        this.$confirm(`确认删除IDC：${value.name} 吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(
          () => {
            deleteIdc(value.id).then(
              () => {
                this.fetchData()
                this.$message({
                  message: '删除IDC成功',
                  type: 'success'
                })
              })
          }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleCancelEdit() {
        this.dialogVisibleEdit = false
        this.$refs.idcForm.$refs.form.resetFields()
      },
      handleCancelAdd() {
        this.dialogVisibleAdd = false
        this.$refs.idcForm.$refs.form.resetFields()
      },
      handleSubmitEdit(value) {
        const { id, ...data } = value
        this.isLoading = true
        updateIdc(id, data).then(
          () => {
            this.isLoading = false
            this.handleCancelEdit()
            this.fetchData()
            this.$message({
              type: 'success',
              message: '更新IDC成功'
            })
          })
      },
      handleSubmitAdd(value) {
        this.isLoading = true
        createIdc(value).then(
          () => {
            this.isLoading = false
            this.handleCancelAdd()
            this.fetchData()
            this.$message({
              type: 'success',
              message: '创建IDC成功'
            })
          })
      }
    },
    created() {
      this.fetchData()
    }
  }
</script>

<style lang="scss" scoped>
  .idcs-list-container {
    .pageination {
      text-align: center;
      margin-top: 15px;
    }
    .search {
      margin-bottom: 10px;
    }
  }
</style>
